@import "../../../../../css/common";

$reorder-preview-prefix: reorderPreview;
.dojoDndAvatarHeader {
  display: none;
}


.#{$reorder-preview-prefix}ThumbContainer {
  margin: auto;
  text-align: center;
  position: relative;
  .reorderArrow {
    position: absolute;
    left: -7px;
    top: -8px;
    color: #485566;
    &:hover {
      color: blue;
    }
  }
  .reorderCart {
    display: block;
    padding: 2px;
    color: blue;
    cursor: pointer;
    &.remove {
      color: red;
    }
  }
  .removeIcon {
    position: absolute;
    right: 8px;
    bottom: 7px;
    font-size: 11pt;
    z-index: 1;
    color: #D80000;
    @include hoverable(0.4, 0.6, 1);

  }
  .#{$reorder-preview-prefix}ActionsContainer {
    position: absolute;
    left: 8px;
    bottom: 5px;
    z-index: 1;
  }
  .#{$reorder-preview-prefix}SensorLabel {
    font-size: 8pt;
    margin-bottom: 2px;
  }
}

.#{$reorder-preview-prefix}ThumbOuter {
  position: relative;
  background: #F8F8FF;
  padding: 5px;
  margin: 5px;
  border: 1px solid #DFDFDF;
  cursor: move;
  opacity: .8;

}

.#{$reorder-preview-prefix}Thumb {
  width: 90px;
  height: 90px;

}


.#{$reorder-preview-prefix}PopoutContainer {
  padding: 5px !important;
  max-height: 60%;
  overflow: auto;
  width:100%;


  .dojoDndItem, .dojoDndItemOver {
    background: none;
    padding: 0;
    margin: 0;
  }
  .dojoDndItem {
    border: 1px solid white;
  }
  .dojoDndItemOver {
    border: 1px solid white;
    .#{$reorder-preview-prefix}ThumbOuter {
      opacity: 1;
    }
  }
  .#{$reorder-preview-prefix}LoadingSpinnerContainerOuter {
    width: 90%;
    height: 20px;
    color: #328AE7;

  }
}